<template>
  <ul class="box">
    <li class="box-block" v-for="(item,index) in data" v-if='loadMore||index < 2' :key="index">
      <div class="box-block_left">
        <img :src="item.img"/>
      </div>
      <div class="box-block_right">
        <dl class="details">
          <dt class="details-title">
            {{item.name}}
            <span class="details-title-tip">{{item.label}}</span>
          </dt>
          <dd class="details-tags">
            <span v-for="(itemTags,indexTags) in item.tags"
                  :class="{'tags_activate':itemTags.is}">{{itemTags.text}}</span>
          </dd>
          <dd class="details-list">
            <ul class="list-box">
              <li>
                案件编号:
                <span class="jump" v-init-tooltips='{
                 tableName: item.tableName,
                 systemid: item.systemid,
                 bsh: item.number,
                 bshlx: "002"
                }'>{{item.number}}</span>
              </li>
              <li>
                {{item.type === '0'?'报案':'发案'}}时间：{{item.time}}
              </li>
              <li v-if="item.type === '0'">
                接警单位：{{item.address}}
              </li>
              <li v-if="item.type === '1'">
                发案地点：{{item.address}}
              </li>
            </ul>
          </dd>
        </dl>
      </div>
    </li>
    <li class="load-button" @click.stop="load">
      {{loadMore?'收起':'查看更多'}} <i :class="{'iconfont':true,'icon-down-trangle':!loadMore,'icon-arrow-up':loadMore}"></i>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'case-list',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        // 查看更多
        loadMore: false
      }
    },
    methods: {
      /**
       * 查看更多
       */
      load() {
        this.loadMore = !this.loadMore
      }
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .box {
    padding-left: 2.2rem;
    padding-right: .5rem;
    &-block {
      display: flex;
      border-bottom: 1px solid #e9e9e9;
      margin-bottom: 0.5rem;
      &_left {
        flex-grow: 1;
        float: left;
        > img {
          width: 6rem;
        }
      }
      &_right {
        flex-grow: 8;
        float: right;
        .details {
          padding: 0;
          margin: 0 .4rem 0 .6rem;
          &-title {
            color: #333;
            font-size: 1rem;
            font-weight: bold;
            &-tip {
              font-size: .5rem;
              background: #4c81e3;
              padding: 0.05rem .7rem .1rem;
              color: #fff;
              font-weight: normal;
              border-radius: .6rem;
            }
          }
          dd {
            margin-left: 0;
            margin-bottom: .2rem;
          }
          &-tags {
            > span {
              font-size: .5rem;
              background: #cccccc;
              padding: 0.2rem .7rem .25rem;
              color: #fff;
              font-weight: normal;
              border-radius: .6rem;
              margin-right: .2rem;
              &.tags_activate {
                background: #ff6600;
              }
            }
          }
          &-list {
            .list-box {
              padding-left: 0;
              > li {
                > .jump {
                }
              }
            }
          }
        }
      }
    }
    .load-button {
      text-align: center;
      font-size: 1rem;
      line-height: 1;
    }
  }
</style>
